<template>
  按图书类别查询：
  <a-select
      v-model:value="categoryId"
      style="width: 120px"
      :options="category"  placeholder="不限类型">
  </a-select>
  <a-button type="primary" @click="query()" style="margin-left: 10px">
    查询
  </a-button>

  <a-space size="small">
    <router-link to="/addBook">
      <a-button style="margin-left: 50px">
        添加图书信息
      </a-button>
    </router-link>

  </a-space>

  <a-table :columns="columns" :data-source="data"
           :pagination="pagination"
           @change="handleTableChange">
    <template #indexDraw="{index}">
      {{covering(index+1)}}
    </template>
    <template #bodyCell="{ column, text ,record}">
      <template v-if="column.dataIndex === 'categoryName'">
        <a @click="updateBook(record)">{{ text }}</a>
      </template>
      <template v-if="column.dataIndex === 'publishTime'">
        <span>{{ formatDate(text) }}</span>
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue';
import axios from "axios";
import {SelectProps} from 'Ant-design-vue'
import moment from "moment";
import {useRouter} from "vue-router";

const columns = [
  {
    title: '序号',
    dataIndex: 'indexDraw',
    fixed: 'left',
    slots:{customRender: 'indexDraw'}
  },
  {
    title: '图书名称',
    dataIndex: 'name'
  },
  {
    title: '出版日期',
    dataIndex: 'publishTime',
  },
  {
    title: '出版社',
    dataIndex: 'publishName'
  },
  {
    title: '价格',
    dataIndex: 'price'
  },
  {
    title: '图书类别',
    dataIndex: 'categoryName'
  }
];

export default defineComponent({
  name: 'HomeView',
  setup() {
    const router = useRouter();

    const pagination =ref({
      current:1,
      pageSize:3,
      total:0
    });

    const updateBook=(book:any)=>{
      router.push({
        path: '/updateBook',
        query:{data: JSON.stringify(book)}
      })
    }

    const covering = (index: number) => {
      return String(index).padStart(2, '0');
    };


    const query = ()=>{
      queryBookList({
        page:1,
        size:pagination.value.pageSize
      });
    }

    //声明了一个响应式的book对象
    //const book = ref();
    const data = ref();
    //钩子函数
    onMounted(()=>{
      queryBookList({
        page:1,
        size:pagination.value.pageSize
      });
      queryBookCategoryList();
    })

    const queryBookList=(params:any)=>{
      axios.get("http://localhost:8080/getBookList",{
        params:{
          page:params.page,
          size:params.size,
          id:categoryId.value
        }
      }).then((resp)=>{
        console.log('resp:',resp);
        data.value=resp.data.list;
        //重置分页的按钮
        pagination.value.current=params.page;
        pagination.value.total=resp.data.total;
      });
    }

    // 表格单击页码时触发的函数
    const handleTableChange=(pagination:any)=>{
      queryBookList({
        page:pagination.current,
        size:pagination.pageSize
      });
    };

    const category = ref<SelectProps['options']>([]);
    const categoryId = ref();


    //获得所有图书类型数据
    const queryBookCategoryList = ()=>{
      axios.get("http://localhost:8080/getBookListCategory").then((resp)=>{
        const data = resp.data;
        data.unshift({id:'',name:'不限类型'});
        console.log(data);
        category.value = data.map((item:{id:number,name:string})=>({
          value:item.id,
          label:item.name
        }));
      });
    }
    return {
      data,
      columns,
      category,
      categoryId,
      query,
      handleTableChange,
      pagination,
      updateBook,
      covering
    };
  },
  methods: {
    formatDate(date: string) {
      return moment(date).format('YYYY-MM-DD');
    }
  }
});
</script>